<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :xs="9" :sm="8" :md="6" :lg="6" :xl="6">
        <div class="head-container">
          <el-input v-model="deptName" clearable placeholder="输入部门名称搜索" maxlength="10" prefix-icon="el-icon-search"
                    style="width: 100%;" class="filter-item" @input="getDeptDatas"/>
        </div>
        <el-tree :data="depts" :props="defaultProps" :expand-on-click-node="false" node-key="id"
                 :default-expanded-keys="expanded" @node-click="handleNodeClick"/>
      </el-col>
      <!--用户数据-->
      <el-col :xs="15" :sm="16" :md="18" :lg="18" :xl="18">
        <!--工具栏-->
        <div class="head-container">
          <el-input v-model="name" clearable placeholder="输入名称搜索" maxlength="10" style="width: 200px;"
                    class="filter-item" @keyup.enter.native="init"/>
          <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="init">搜索</el-button>
        </div>
        <!--表格渲染-->
        <el-table v-loading="loading" :data="data" size="small" @selection-change="handleSelectionChange"
                  style="width: 100%;" border>
          <el-table-column type="selection" width="40" align="center"/>
          <el-table-column prop="name" label="姓名" align="center"/>
         <!-- <el-table-column prop="specialtyName" label="专业"/> -->
          <el-table-column prop="jobName" label="岗位" align="center"/>
          <el-table-column prop="phone" label="手机号" align="center"/>
        </el-table>
        <el-pagination
          :total="total"
          :current-page="page + 1"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChange"
          @current-change="pageChange"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import initData from '@/mixins/initData'
  import initDict from '@/mixins/initDict'
  import { getDepts } from '@/api/framework/system/dept'
  import { parseTime } from '@/utils/index'

  export default {
    mixins: [initData, initDict],
    data() {
      return {
        selectedData: [],
        height: document.documentElement.clientHeight - 180 + 'px;', isAdd: false,
        name: '',
        depts: [],
        deptId: null,
        deptName: '',
        defaultProps: {
          id: 'id',
          children: 'children',
          label: 'name'
        },
        expanded: ['1', '14986188603464026668']
      }
    },
    created() {
      this.getDeptDatas()
      this.$nextTick(() => {
        this.init()
      })
    },
    mounted: function() {
      const that = this
      window.onresize = function temp() {
        that.height = document.documentElement.clientHeight - 180 + 'px;'
      }
    },
    methods: {
      parseTime,
      beforeInit() {
        this.url = 'web/user/page-list'
        this.params = { page: this.page, size: this.size, roleCode: 'r_student', deptId: this.deptId, name: this.name }
        return true
      },
      getDeptDatas() {
        const sort = 'id,desc'
        const params = { sort: sort }
        if (this.deptName) {
          params['name'] = this.deptName
        }
        getDepts(params).then(res => {
          this.depts = res.content
        })
      },
      handleNodeClick(data) {
        if (data.pid === 0) {
          this.deptId = null
        } else {
          this.deptId = data.id
        }
        this.init()
      },
      handleSelectionChange(val) {
        this.selectedData = val
      },
      getResult() {
        const data = []
        this.selectedData.forEach(item => {
          const itemInfo = {
            id: item.id,
            name: item.name
          }
          data.push(itemInfo)
        })
        return { type: 4, data: data }
      }
    }
  }
</script>

<style scoped>
</style>
